<template>
    <div>
        <h1>人员列表</h1>
        <input type="text" placeholder="请输入要添加的名字" v-model="Listname">
        <button @click="personadd">添加</button>
        <ul>
            <li v-for="(p,index) in personList" :key="index">
                {{p.name}}
                {{p.id}}</li>
        </ul>
        <h3>上方组件求和为{{count}}</h3>
    </div>
</template>
<script>
    import { mapState } from 'vuex'
    import { nanoid } from 'nanoid'
    export default {
        name: "Person",
        data() {
            return {
                Listname: ''
            }
        },
        computed: {
            count() {
                return this.$store.state.count

            },
            personList() {
                return this.$store.state.personList
            }
            // ...mapState({ personList: 'personList' })
        }, methods: {
            personadd() {


                let perobj = { id: nanoid(), name: this.Listname }
                this.$store.commit('ADDPERSON', perobj)
                this.Listname = ''

            }
        },
    }
</script>
<style>
</style>